

<div class="header">
    <h1 class="page-title">商品列表</h1>
</div>

<div class="well">
    <!-- search button -->
    <form action="/admin/goodsList" method="get" class="form-search">
        <div class="row-fluid" style="text-align: left;">
            <div class="pull-left span4 unstyled">
                <p> 商品名称：<input class="input-medium" name="goods_name" type="text" value="{$name}"></p>
            </div>
        </div>
        <div class="row-fluid" style="text-align: left;">
            <div class="pull-left span4 unstyled">
                <p> 商品分类、
                    <select name="" id="">
                        <option value="">请选择分类</option>
                        {volist name="category" id="item"}
                        <option value="{$item.id}">{$item.cate_name}</option>
                        {/volist}
                    </select>
                </p>
            </div>
        </div>
        <button type="submit" class="btn">查找</button>
        <a class="btn btn-primary" href="/admin/goodsAdd">新增</a>
        <a class="btn btn-primary" href="javascript:void(0)" id="batch-del">批量删除</a>
    </form>
</div>
<div class="well">
    <!-- table -->
    <table class="table table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <th><input type="checkbox" class="check-all"></th>
            <th>编号</th>
            <th>商品名称</th>
            <th>商品状态</th>
            <th>商品分类</th>
            <th>品牌名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品logo</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {foreach $data as $value}
            <tr class="success">
                <td><input type="checkbox" class="row-goods" data-id="{$value.id}"></td>
                <td>{$value.id}</td>
                <td><a href="javascript:void(0);">{:str_replace($name,"<font color='red'>$name</font>",$value.goods_name)}</a></td>
                <td data-id="{$value.id}">{$value.goods_status == 2 ? "<span style='color: blue' class='status'>下架</span>" : "<span style='color: red' class='status'>上架</span>"}</td>
                <td>{$value.cate.cate_name}</td>
                <td>{$value.brand.name}</td>
                <td>23.90</td>
                <td>100</td>
                <td><img src="/storage/{$value.goods_logo}"></td>
                <td>2017-04-01 08:00:00</td>
                <td>
                    <a href="/admin/editor?id={$value.id}"> 编辑 </a>
                    <a href="javascript:void(0);" onclick="if(confirm('确认删除？')) location.href='#'"> 删除 </a>
                </td>
            </tr>
        {/foreach}
        </tbody>
    </table>
    <!-- pagination -->
    <div class="pagination">
       {$data|raw}
    </div>
</div>

<script>

    $('.check-all').click(function () {
        // $('.row-goods').attr("checked",) 复选框修改选中属性不能通过attr
        $('.row-goods').prop("checked",$(this).prop("checked"))
    });

    $("#batch-del").click(function () {
        // alert(111);// 调试 测试点击事件是否成功
        // 获取所有选中的复选框
        let ids = [];
        let checkedAll = $('.row-goods:checked');
        if (checkedAll.length == 0) {
            alert("请选择要删除的数据");return false;
        }
        $('.row-goods:checked').each(function (i,v) {
            let id = $(v).attr('data-id');
            ids.push(id);// attr() 获取属性的值
        })
        // console.log(ids);
        // 发送请求
        $.ajax({
            url:'/admin/goodsDel',
            data:{ids:ids},
            dataType:"json",
            type:"post",
            success:function (response) {
                console.log(response);
                if (response.code == 200) {
                    // 方式一
                    // $('.row-goods:checked').each(function (i,v) {
                    //    $(v).parents('tr').remove();
                    // });
                    // 重新加载页面
                    location.href='/admin/goodsList';
                }
            }
        });
    })

    // 状态即点即改
    $('.status').click(function () {
        let id = $(this).parent().attr('data-id');

        let that = $(this);

        $.ajax({
            url:'/admin/statusUpdate',
            data:{id:id},
            dataType:'json',
            type:"post",
            success:function (response) {
                if (response.code ==200) {
                    alert(response.msg);
                    if (that.text() == '上架') {
                        that.text("下架");
                        that.css('color','blue');
                    } else {
                        that.text("上架")
                        that.css('color','red');
                    }
                }

            }
        })
    })
</script>